<template>
	<a-space v-if="props.urlStr">
		<span v-for="itemVal in props.urlStr.split(',')" :key="itemVal">
			<img
				v-if="itemVal.substr(itemVal.lastIndexOf('.') + 1, itemVal.length).toLowerCase() === 'pdf'"
				:width="60"
				src="/src/assets/images/pdf.png"
				class="object-contain cursor-pointer"
				@click="onPdfPreview(itemVal)"
			/>
			<a-image v-else :width="60" :height="60" :src="itemVal" class="h-[100%] object-cover" />
		</span>
	</a-space>
	<span v-else>-</span>
</template>

<script setup>
	const props = defineProps({
		urlStr: {
			type: String,
			required: true
		}
	})

	const onPdfPreview = (url) => {
		window.open(url.replace('http://', 'https://'))
	}
</script>

<style scoped></style>
